<template>
  <view>
    <search @click.native="goToSearch"></search>
    <view class="scoll-container">
      <!-- 左边导航 -->
      <scroll-view
        class="left-scoll-box"
        scroll-y="true"
        :style="{ height: wh + 'px' }"
      >
        <block v-for="(item, index) in sortList" :key="index">
          <view
            :class="['left-scoll-item', index === active ? 'active' : '']"
            @click="activeChange(index)"
          >
            {{ item.cat_name }}
          </view>
        </block>
      </scroll-view>
      <!-- 右侧详情 -->
      <scroll-view
        scroll-y="true"
        :style="{ height: wh + 'px' }"
        :scroll-top="scrollTop"
      >
        <block v-for="(item, index) in sortList2" :key="index">
          <view class="right-item">
            <!-- 标题 -->
            <view class="right-item-title">{{ item.cat_name }}</view>
            <!-- 内容 -->
            <view class="right-item-content-box">
              <view
                class="right-item-content"
                v-for="(content, i) in item.children"
                :key="i"
                @click="goJump(content)"
              >
                <image :src="content.cat_icon"></image>
                <text>{{ content.cat_name }}</text>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import mixins from '@/mixins/tabbar-icon.js'
export default {
  mixins: [mixins],
  data() {
    return {
      wh: 0,
      sortList: [], //一级分类
      active: 0,
      sortList2: [], //二级分类,
      scrollTop: 0 //滚动条
    }
  },
  onLoad() {
    const phoneInfo = uni.getSystemInfoSync()
    ;(this.wh = phoneInfo.windowHeight - 56), this.getSortList()
  },
  methods: {
    //获取分类数据
    async getSortList() {
      const { data } = await uni.$http.get('/api/public/v1/categories')
      if (data.meta.status !== 200) return uni.$errShowMes()
      this.sortList = data.message
      this.sortList2 = this.sortList[this.active].children
    },
    //更改选中样式
    activeChange(index) {
      this.active = index
      this.sortList2 = this.sortList[this.active].children
      this.scrollTop = this.scrollTop === 0 ? 1 : 0
    },
    //跳转商品列表
    goJump(content) {
      uni.navigateTo({
        url: `/subpkg/goods_list/goods_list?cid=${content.cat_id}`
      })
    },
    //跳转serach页面
    goToSearch() {
      uni.navigateTo({
        url: '/subpkg/search/search'
      })
    }
  }
}
</script>

<style lang="scss">
.scoll-container {
  display: flex;
  background-color: #fff;

  .left-scoll-box {
    width: 300rpx;

    .left-scoll-item {
      background-color: #ecf0f1;
      line-height: 40px;
      text-align: center;
      font-size: 14px;

      &.active {
        background-color: #fff;
        position: relative;
        line-height: 50px;
        color: #686de0;

        &::before {
          content: ' ';
          display: block;
          width: 5px;
          height: 30px;
          background-color: #686de0;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }

  .right-item {
    .right-item-title {
      font-weight: bold;
      text-align: center;
      padding: 20rpx 4rpx;
    }

    .right-item-content-box {
      display: flex;
      flex-wrap: wrap;
      justify: space-between;

      .right-item-content {
        display: flex;
        // flex: 1;
        width: 25%;
        flex-direction: column;
        text-align: center;
        margin-bottom: 18rpx;

        image {
          width: 60px;
          height: 60px;
        }

        text {
          font-size: 10px;
        }
      }
    }
  }
}
</style>
